<template>
  <div class="register">
    <div class="xlogin">
      <h1>欢迎注册</h1>
      <h4>请输入您的个人信息</h4>
      <div class="input">
        <h3>用户名设置</h3>
        <input type="text" placeholder="请输入用户名" />
        <h3>密码设置</h3>
        <input type="text" placeholder="请输入密码" />
        <h3>请输入手机号码</h3>
           <input type="text" placeholder="请输入手机号码" />
        <h3>确认密码</h3>
        <input type="text" placeholder="请确认密码" />
        <button>欢迎注册</button>
        <div class="llast">
          <span>&bull;&nbsp;注册代表您同意</span>
          <span>《小鱼用户协议》</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.register {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .xlogin {
    width: 700px;
    height: 690px;
    background-color: rgb(246, 203, 177);
    // margin: 0 auto;
    box-shadow: 10px 10px 10px 10px rgb(227, 199, 199);

    h1 {
      margin-top: 62px;
      color: black;
      font-size: 30px;
      font-weight: 600;
    }
    h4 {
      margin-top: 30px;
      font-size: 18px;
    }
    .input {
      margin: auto;
      margin-top: 43px;
      // background-color: red;
      width: 590px;
    }
    h3 {
      margin: 10px 0;
      font-size: 18px;
      font-weight: 500;
      text-align: left;
    }

    // input:focus {
    //   color: rgb(15, 15, 15);
    // }
    input:focus::placeholder {
      opacity: 0;
      transition: 0.2s;
    }
    input:not(.inp) {
      width: 550px;
      height: 50px;
      margin-right: 40px;
      // border-radius: 5px;
      border: none;
      border-bottom: 1px solid black;
      outline: none;
      padding: 0 25px;
      font-size: 18px;
    }
    .inp {
      width: 20px;
      height: 20px;
    }
    .status {
      display: flex;
      .inph {
        margin-top: 32px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        width: 590px;
        .left {
          position: relative;
        }
        .s {
          position: absolute;
          top: 4px;
          width: 120px;
          font-size: 18px;
        }
      }
    }

    .llast {
      font-size: 18px;
      margin-top: 30px;
      span:last-child {
        color: rgb(235, 15, 110);
        margin-top: 20px;
      }
      span:last-child:hover {
        color: deeppink;
      }
    }

    button {
      width: 250px;
      height: 60px;
      background-color: rgb(237, 105, 57);
      border: none;
      font-size: 18px;
      color: white;
      border-radius: 30px;
      margin-top: 30px;
    }
    button:hover {
      font-size: 20px;
      color: antiquewhite;
      background-color: crimson;
      transform: 0.3;
    }
  }
}
</style>